<fieldset class="layui-elem-field layui-field-title">
	<legend>预定客房</legend>
</fieldset>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">电话号码</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" placeholder="输入电话号码" required
				lay-verify="required" class="layui-input" disabled>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="输入姓名" required
				lay-verify="required" class="layui-input" disabled>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input type="text" name="idcard" placeholder="输入身份证号" required
				lay-verify="required" class="layui-input" disabled>
		</div>
	</div>


	<input type="hidden" name="userId">


	<div class="layui-form-item">
		<label class="layui-form-label">房间</label>
	</div>


	<div class="layui-form-item">
		<label class="layui-form-label">入住时间</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="start" id="start">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">退房时间</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="end" id="end">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">房间类型</label>
		<div class="layui-input-inline">
			<select name="type" lay-filter="type">
				<option value="">请选择房间类型</option>
				<option value="0">大床房</option>
				<option value="1">标准间</option>
				<option value="2">三人间</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button type="submit" class="layui-btn" lay-submit
				lay-filter="order-add">立即添加</button>
		</div>
	</div>

</form>

<table id="room-list" lay-filter="room-list">
</table>

<script>
	layui.use([ 'form', 'laydate', 'table' ], function() {
		var form = layui.form;
		var laydate = layui.laydate;
		var table = layui.table;
		//form.render();

		form.render();

		laydate.render({
			elem : '#start',
			type : 'datetime',
			done : function(value, date, endDate) {
				$("input[name='start']").val(value);
				queryRoom();
			}
		});
		laydate.render({
			elem : '#end',
			type : 'datetime',
			done : function(value, date, endDate) {
				$("input[name='end']").val(value);
				queryRoom();
			}
		});

		//var phone = $(this).val();
		$.ajax({
			url : '/api/user/loginUser',
			type : 'get',
			dataType : 'json',
			success : function(result) {
				if (result.code >= 0) {
					$("input[name='phone']").val(result.data.phone);

					$("input[name='name']").val(result.data.name);
					$("input[name='idcard']").val(result.data.idcard);
					$("input[name='userId']").val(result.data.id);
				} else {
					layer.msg(result.msg);
				}
			},

			error : function() {
				layer.msg('请求失败');
			}
		});
		// 过滤不正常的房间选项
		table.render({

			elem : '#room-list',
			page : true,
			url : '/api/room/user/query',
			cols : [ [ {
				type : 'radio',
				title : 'ID',
				field : 'id'
			}, {
				title : '房间号',
				field : 'number'
			}, {
				title : '类型',
				field : 'type',
				templet : function(d) {
					return [ '大床房', '标准间', '三人间' ][d.type];
				}
			}, {
				title : '描述',
				field : 'dscp'
			}, {
				title : '价格',
				field : 'price'
			}, {
				title : '状态',
				field : 'status',
				templet : function(d) {

					return [ '正常', '异常' ][d.status];
				}
			}, ] ],
			parseData : function(res) {
				return {
					code : res.code,
					msg : res.msg,
					count : res.data.total,
					data : res.data.list,
				};
			}
		});

		form.on("select(type)", function(data) {
			queryRoom();
		});
		function queryRoom() {
			var start = $("input[name='start']").val();
			var end = $("input[name='end']").val();
			var type = $("select[name='type']").val();
			//	console.log(start);
			//console.log(end);
			table.reload('room-list', {
				where : {
					start : start,
					end : end,
					type : type
				},
				page : {
					cur : 1
				},
			});
		}

		form.on('submit(order-add)', function(data) {
			var field = data.field;
			//console.log(field);
			var checkStatus = table.checkStatus('room-list');
			if (checkStatus.data.length) {
				field.roomId = checkStatus.data[0].id;
			}
			if (!field.phone || field.phone.length != 11) {
				layer.msg('电话必须是11位');
				return false;
			}

			if (!field.name || field.name.length< 2|| field.name.length>32) {
				layer.msg('名字位于2位到32位之间');
				return false;
			}

			if (!field.idcard || field.idcard.length != 18) {
				layer.msg('身份证号必需是18位');
				return false;
			}

			if (!field.start) {
				layer.msg('入住时间不能为空');
				return false;
			}

			if (!field.end) {
				layer.msg('退房时间不能为空');
				return false;
			}
			if (field.start >= field.end) {
				layer.msg('入住时间必须小于退房时间');
				return false;
			}
			if (!field.roomId) {
				layer.msg('请必须选择一个房间');
				return false;
			}
			//console.log(field);
			$.ajax({
				url : '/api/order/user/add',
				data : field,
				type : 'post',
				dataType : 'json',
				success : function(result) {
					//console.log('AAAAAAAAAAAAA');
					if (result.code > 0) {
						layer.confirm('预定成功，继续预定', {
							btn : [ '继续预定', '跳转列表' ]
						}, function(index) {
							layer.close(index);
							$("input[name='start']").val('');
							$("input[name='end']").val('');
							queryRoom();
						}, function(index) {
							open('/user/myorder.html');
						});
					} else {
						layer.msg(result.msg);
					}
				},
				error : function() {
					layer.msg('请求失败');
				}
			});
			return false;
		});
	});
</script>